import {defineComponent, reactive, ref} from "vue"
import "../css/index.css"
import {TypesStore} from "@/stores/types";
import {storeToRefs} from "pinia";

export default defineComponent({
    props: {
        visible: {
            type: Object, default: {}
        },
        isDetail: {
            type: Boolean, default: false
        },
        closeDia: {
            type: Function, default: () => {
            }
        },
        saveDia: {
            type: Function, default: () => {
            }
        },
        handleAdd: {
            type: Function, default: () => {
            }
        },
        diaForm: {
            type: Object, default: {}
        },
        changeValue: {
            type: Function, default: () => {
            }
        },
        diaTitle: {
            type: String,
            default: ""
        }

    }, setup(props) {
        const formRef = ref(null)
        const fileList = ref([])
        const types_store = TypesStore()
        let {typesAllList} = storeToRefs(types_store)
        const rules = reactive({})

        // 表单校验
        const validateForm = async () => {
            await formRef.value.validate((valid, fields) => {
                if (valid) {
                    if (props.diaTitle === "新增评论") {
                        props.handleAdd()
                    } else {
                        props.saveDia()
                    }
                    formRef.resetFields()
                }
            })
        }
        return (props) => {
            const typeOption = typesAllList.value.map(item => {
                return <el-option
                    key={item.id}
                    label={item.type_name}
                    value={item.id}
                />
            })
            return (
                <>
                    <el-dialog
                        v-model={props.visible.value}
                        title={props.diaTitle}
                        width={'70%'}
                        show-close>
                        <el-form
                            model={props.diaForm}
                            ref={formRef}
                            rules={rules}
                            label-width={'120px'}>
                            <el-form-item label={"评论内容"} prop={'comment_content'}>
                                <div className={'comment-box'}>
                                    {props.diaForm.comment_content}
                                </div>
                            </el-form-item>
                        </el-form>
                        <div className={"diaFooter"}>
                        <span className="dialog-footer">
                            {
                                props.isDetail ? <>
                                        <el-button onClick={props.closeDia}>关闭</el-button>
                                    </> :
                                    <>
                                        <el-button onClick={props.closeDia}>取消</el-button>
                                        <el-button
                                            type="primary"
                                            onClick={validateForm}>保存
                                        </el-button>
                                    </>
                            }

                    </span>
                        </div>
                    </el-dialog>
                </>
            )
        }
    }
})